<html>
<head>
    <meta charset="utf-8">
</head>
<body>
  <script src='../libs/easeljs.js'></script>
	<script src="../libs/createui.js"></script>
	<script src="../libs/createSprite.js"></script>
	<script src="../libs/createEvent.js"></script>
	<script src="../libs/p2.js"></script>
	<script src="../libs/moonP2.js"></script>
	<canvas id='canvas' width=1000 height=600></canvas>
	<script>

		var canvas=document.getElementById('canvas');
		var stage = createui.initStage(canvas,update);
		var sceneLayer = new MScene({});
		stage.addChild(sceneLayer);

        var world = createWorld();
		createWall(sceneLayer,canvas.width,canvas.height)
		var txts=['🛐','⚛️','🕉️','✡️','☸️','☯️','✝️','☦️','☪️','☮️','🕎','🔯','♈','♉','♊','♋']
		for(var i=0;i<txts.length;i++){
			let [x,y]=[Math.random()*canvas.width,Math.random()*canvas.height];
			var box=createBox(x,y);
			sceneLayer.addChild(box);
			box.clear()
			let label=new MLabel({label:txts[i]});
			label.scale=2.45;
			box.addChild(label)
			box.addEventListener('click',function(e){
				let box=e.currentTarget;
				box.body.velocity=[Math.random()*40-20,-100];
			})
		}
		var txts=['⚽','⚾','🥎','🏀','🏐','😀','😃','😄','😁','😆','😅','🤣','😂','🙂','🙃','😉','😊','😇','😍','🤩','😗','😚','😙','😋','😛','😜','🤪']
		for(var i=0;i<txts.length;i++){
			let [x,y]=[Math.random()*canvas.width,Math.random()*canvas.height];
			var box=createCircle(x,y);
			sceneLayer.addChild(box);
			box.clear()
			let label=new MLabel({label:txts[i]});
			label.scale=2.5;
			box.addChild(label)
			box.addEventListener('click',function(e){
				let box=e.currentTarget;
				box.body.velocity=[Math.random()*40-20,-150];
			})
		}
		for(var i=0;i<20;i++){
			let [x,y]=[Math.random()*canvas.width,Math.random()*canvas.height];
			var box=i>10?createCircle(x,y):createBox(x,y);
			sceneLayer.addChild(box);
		}
		function update() {
			updateWorld(world)
		}
    </script>
</body>

</html>